<template>
  <div class="dialog-container">
    <el-dialog
      :title="title"
      center
      :modal="true"
      :modal-append-to-body="false"
      :visible.sync="dialogShow"
      :before-close="cancalDialog"
    >
      <!-- <span> -->
      <slot></slot>
      <!-- </span> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancalDialog()">取 消</el-button>
        <el-button type="primary" @click="confirm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    // 弹窗标题
    title: {
      type: String,
      default: "title"
    },
    dialogShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  computed: {},
  methods: {
    cancalDialog() {
      this.$emit("updateShow", false);
    },
    confirm() {
      this.$emit("updateTitle", "新标题");
    }
  },
  watch: {}
};
</script>

<style lang="scss">
.dialog-container {
  .el-dialog {
    background: url("../../../assets/img/dialog/dialog.png") no-repeat;
    background-position: center;
    background-size: 100% 100%;
    .el-dialog__header {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 50px !important;
      .el-dialog__title {
        color: #fff;
        font-weight: bold;
        font-size: 20px;
      }
    }
    .el-dialog__body {
      height: 500px !important;
    }
  }
}
</style>
